<template>
  <div :id="topRecommend.playlists.id">
    
    <ul class="rmtj-content" v-if="topRecommend">
      <li
        v-for=" ({name, coverImgUrl, playCount,id})  in topRecommend.playlists"
        :key="name"
      >
      <router-link :to="`/musiclistdetails/${id}`">
        <div class="cover">

          <img :src="coverImgUrl" alt="" />
          <div class="bottom">

            <a
              class="icon-play pa"
              style="bottom: 5px; right: 10px"
              title="播放"
              href="javascript:;"
            ></a>
            <span class="icon_headset"></span>
            <span class="nb">{{ Math.ceil(playCount / 100000) }}万</span>
          </div>
        </div>
         </router-link>
        <p class="dec">{{ name }}</p>
      </li>
    </ul>
   
    
    <!-- 歌曲列表  结束-->
  </div>
</template>

<script>
export default {
  props: ["topRecommend"],
  mounted(){
    console.log(this.topRecommend)
  }
};
</script>

<style lang="scss" scoped>
.rmtj-content {
  margin: 20px 0 0 -24px;
  overflow: hidden;
}

.rmtj-content li {
  width: 140px;
  height: 204px;
  float: left;
  padding: 0 0 30px 42px;
}

.rmtj-content li .cover {
  width: 140px;
  height: 140px;
  position: relative;
}

.rmtj-content li .bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 27px;
  background-position: 0 -537px;
  color: #ccc;
  background-image: url(../assets/images/coverall.png);
  background-repeat: no-repeat;
}

.rmtj-content .cover img {
  width: 140px;
  height: 140px;
  cursor: pointer;
}

.rmtj-content li .dec {
  margin: 8px 0 0 3px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1.2em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}

.rmtj-content li .dec:hover {
  text-decoration: underline;
}

.rmtj-content .cover .nb {
  color: #ccc;
  font-size: 12px;
  float: left;
  margin: 9px 0 0 0;
}

.rmtj-content .icon_headset {
  float: left;
  width: 14px;
  height: 11px;
  background-position: 0 -24px;
  margin: 9px 5px 9px 10px;
  background-image: url(../assets/images/iconall.png);
  background-repeat: no-repeat;
}
</style>